<template>
  <div class="set-all-con">
    <div class="text-con">
      <span>名称:</span>
      <input type="text" v-model="customobj.textcon" placeholder="输入您的内容" />
    </div>

    <div class="text-con">
      <span>背景:</span>
      <el-color-picker
        class="mycolor"
        size="small"
        v-model="customobj.color"
        show-alpha
        :predefine="customobj.predefineColors"
        @change="activeChange"
      ></el-color-picker>
    </div>

    <div class="opaqueness">
      <span>不透明度:</span>
      <div class="set-opaq">
        <!-- <span>100%</span>
        <div class="set-opaq-right">
          <i class="el-icon-arrow-up"></i>
          <i class="el-icon-arrow-down"></i>
        </div> -->
        <input type="number" v-model="opacity" value="0" max="100" min="0">
      </div>
    </div>

    <div class="opaqueness" style="margin-top:10px">
      <span>上传图片:</span>
      <div class="hintImg" v-if="backStyle.backgroundImage">
        <img :src="backStyle.backgroundImage" alt="">
      </div>
      <img class="upimg" :class="{'no_show': noShow}" src="@/assets/config_images/addimg.png" alt @click="showImg=true" />
    </div>

    <UploadImages @closeModel="closeModel" :dialogVisible="showImg" @changeImg="changeImg"></UploadImages>
  </div>
</template>
<script>
import UploadImages from "@/components/UploadImages/UploadImages";
import "./diyset.scss";
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["backStyle"])
  },
  components: {
    UploadImages
  },
  data() {
    return {
      noShow: false,
      showImg: false,
      opacity: "100",
      nowid: "",
      customobj: {
        textcon: "",
        color: "rgba(0, 206, 209, 1)",
        predefineColors: [
          "#ff4500",
          "#ff8c00",
          "#ffd700",
          "#90ee90",
          "#00ced1",
          "#1e90ff",
          "#c71585",
          "rgba(255, 69, 0, 0.68)",
          "rgb(255, 120, 0)",
          "hsv(51, 100, 98)",
          "hsva(120, 40, 94, 0.5)",
          "hsl(181, 100%, 37%)",
          "hsla(209, 100%, 56%, 0.73)",
          "#c7158577"
        ]
      }
    };
  },
  methods: {
    activeChange(color) {
      this.backStyle.background = color;
      this.setlocal();
    },
    closeModel() {
      this.showImg = false;
    },
    changeImg(val) {
      this.noShow = true;
      var cont = "url(" + val + ")"
      this.backStyle.backgroundImage = val;
      this.activeChange(cont);
      // this.$store.state.advert.advertObj.imgUrl = val;
    },
    // 保存数据
    setlocal() {
      this.$store.commit("backStyle/SET_BACKSTYLE", this.backStyle);
      this.nowid = this.$store.state.apply.PageIdx;
      var AllPageJson = JSON.parse(localStorage.getItem("page_json"));// 全部数据
      for (let i = 0; i < AllPageJson.length; i++) {
        const element = AllPageJson[i];
        // 找到当前页
        if (this.nowid === element.id) {
          console.log(element)
          // 当页面为空时
          element.background = JSON.stringify(this.backStyle);
        }
      }
      localStorage.setItem("page_json", JSON.stringify(AllPageJson));
      this.$emit("changeBg")
    }
  },
  watch: {
    opacity(value) {
      this.backStyle.opacity = value / 100;
      this.setlocal();
    },
    backStyle(val) {
      this.customobj.color = val.background;
      this.opacity = val.opacity * 100;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "./diyset.scss";
.set-all-con {
  width: 100%;
  min-height: 300px;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  .text-con {
    @include flexCon(278px, 50px, center, space-between, 64px);
    position: relative;
    input {
      @include wd(225px, 30px);
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      font-size: 14px;
      padding-left: 8px;
      border: 1px solid rgba(223, 223, 223, 1);
    }
    .mycolor {
      position: absolute;
      margin-left: 54px;
    }
  }
  .opaqueness {
    @include flexCon(276px, auto, center, space-between, 40px);
    justify-content: flex-start;
    .hintImg {
      margin-left: 14px;
      width: 60px;
      height: 60px;
      background: #03a799;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .set-opaq {
      @include wd(86px, 30px);
      margin-left: 16px;
      border-radius: 3px;
      line-height: 30px;
      // padding-left: 14px;
      display: flex;
      border: 1px solid rgba(223, 223, 223, 1);
      align-content: center;
      justify-content: space-between;
      input {
        width: 100%;
        border: 0px;
        padding-left: 10px;
      }
      .set-opaq-right {
        @include wd(28px, 28px);
        display: flex;
        flex-direction: column;
      }
    }
    .upimg {
      margin-left: 18px;
      position: absolute;
      left: 96px;
    }
    .no_show {
      opacity: 0;
    }
  }
}
</style>
